import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path:"/",
      redirect:"/home"
    },
    {
      path: '/home',
      name: 'home',
      component: HomeView,
      // 重定向
      redirect: "/home/setup",
      children:[
        {
          // 子路由不加/
          path:"setup",
          name:"setup",
          component: () => import("@/components/compostionAPI/01setup.vue")
        },
        {
          path:"ref",
          name:"ref",
          component: () => import("@/components/compostionAPI/02ref.vue")
        },
        {
          path:"reactive",
          name:"reactive",
          component: () => import("@/components/compostionAPI/03reactive.vue")
        },
         {
          path:"diff",
          name:"diff",
          component: () => import("@/components/compostionAPI/04ref和rective区别.vue")
        },
        {
          path:"computed",
          name:"computed",
          component: () => import("@/components/compostionAPI/05computed.vue")
        },
        {
          path:"watch",
          name:"watch",
          component: () => import("@/components/compostionAPI/06watch.vue")
        },
         {
          path:"lifecycle",
          name:"lifecycle",
          component: () => import("@/components/compostionAPI/07生命周期.vue")
        },
        {
          path:"father",
          name:"father",
          component: () => import("@/components/compostionAPI/08父子传参/index.vue")
        },
        {
          path:"refDom",
          name:"refDom",
          component: () => import("@/components/compostionAPI/09ref获取dom.vue")
        },
        {
          path:"toRefs",
          name:"toRefs",
          component: () => import("@/components/compostionAPI/10toRefs.vue")
        },
         {
          path:"hook",
          name:"hook",
          component: () => import("@/components/compostionAPI/11hook/index.vue")
        },
      ]
    },
    {
      path:"/other",
      name:"other",
      component:HomeView,
     children:[
      {
        path: "shallow",
        name: "shallow",
        component: () => import("@/components/compositionOther/01shallowRef和shallowReactive.vue")
      },
      {
        path: "readonly",
        name: "readonly",
        component: () => import("@/components/compositionOther/02readonly和shallowReadonly.vue")
      },
     ]
    }
  ],
})

export default router
